<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="handle-box">
          <el-date-picker class="mr10" v-model="query.time" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                          range-separator="-">
          </el-date-picker>
          <el-button type="primary" size="small" @click="souClick">搜索</el-button>
        </div>
        <el-tabs v-model="query.type" v-loading="tableLoad" @tab-click="tabClick">
          <el-tab-pane :label="activeapp.name + ' 截图'" name="1">
            <el-row :gutter="10">
              <el-col v-for="item in tableData" :span="3" style="margin-bottom:10px;">
                <el-card class="box-card">
                  <el-image style="" :src="item.picUrl" fit="fill" :preview-src-list="[item.picUrl]"></el-image>
                  <p style="font-size:12px;text-align:center;">{{item.createTime}}</p>
                </el-card>
              </el-col>
            </el-row>
            <el-empty v-if="tableData.length == 0" description="暂无数据"></el-empty>
          </el-tab-pane>
          <el-tab-pane :label="activeapp.name + ' 录屏'" name="2">
            <el-row :gutter="10">
              <el-col v-for="item in tableData" :span="6" style="margin-bottom:10px;">
                <el-card class="box-card">
                  <video style="width:100%;"
                         :src="item.picUrl"
                         controls></video>
                  <p style="font-size:12px;text-align:center;">{{item.createTime}}</p>
                </el-card>
              </el-col>
            </el-row>
            <el-empty v-if="tableData.length == 0" description="暂无数据"></el-empty>
          </el-tab-pane>
        </el-tabs>
        <div class="pagination">
          <el-pagination background layout="total,prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="totalCount"
                         @current-change="handlePageChange" @prev-click="handlePageChange" @next-click="handlePageChange"></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getappVideo } from '../../../../api/index';

export default {
  data() {
    return {
      activeName: 'img',
      query: {
        page: 1,
        limit: 16,
        time: [],
        kw: '',
        type: '1',
      },
      totalCount: 0,
      tableLoad: false,
      tableData: [],


    };
  },
  props: ['activeapp', 'time'],
  created() {
    this.query.time = [this.time, this.time];
    this.getData();
  },
  methods: {
    //获取列表数据
    getData() {
      this.tableLoad = true;
      getappVideo({
        page: this.query.page,
        limit: this.query.limit,
        startTime: this.query.time ? this.query.time[0] : '',
        endTime: this.query.time ? this.query.time[1] : '',
        type: this.query.type,
        userId: this.activeapp.id
      }).then((res) => {
        this.tableLoad = false;
        if (res.code === 0) {
          res.recordList.map(item => {
            item.createTime = this.formatTimestamp(item.createTime);
          })
          this.tableData = res.recordList;
          this.totalCount = res.totalCount;
        } else {
          this.$message(res.msg);
        }
      });
    },
    // 分页切换
    handlePageChange(page) {
      this.query.page = page;
      this.getData();
    },
    //切换type
    tabClick() {
      this.query.page = 1;
      this.getData();
    },
    //搜索
    souClick() {
      this.query.page = 1;
      this.getData();
    },
    //时间戳转换成日期格式
    formatTimestamp(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hours = date.getHours();
      const minutes = date.getMinutes();
      const seconds = date.getSeconds();
      return `${year}-${this.pad(month)}-${this.pad(day)} ${this.pad(hours)}:${this.pad(minutes)}:${this.pad(seconds)}`;
    },
    pad(number) {
      return number.toString().padStart(2, '0');
    }
  },
  mounted() {

  }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.el-icon-star-on >>> .el-loading-spinner {
    margin-top: -10px;
}
.IconColor {
    color: #e6a23c;
}
/deep/ :focus {
    outline: 0;
}
.el-drawer__title {
    color: #72767b;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 25px;
    padding: 20px 35px 0;
}
.el-drawer__title span {
    font-size: 14px;
    color: #66b1ff;
    margin: 20px;
    cursor: pointer;
}
.el-radio {
    margin-right: 0px;
}
.beizhu_text {
    height: 794px;
    overflow: auto;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-left: 35px;
    padding: 20px;
    box-sizing: border-box;
    color: #72767b;
    font-size: 14px;
}
.beizhu_text > div:first-child {
    padding-top: 0;
}
.beizhu_text > div {
    padding: 5px 0;
}
.el-icon-star-on {
    font-size: 20px;
}
</style>
